<template>
  <div class="test-report">
    <!-- 监测分析报告 -->
    <div class="com-top panel3">
      <h2>监测分析报告</h2>
      <!-- <div class="head">
        <div class="title">监测分析报告</div>
        <div class="time">
          <el-date-picker v-model="value3" type="year" placeholder="选择年"> </el-date-picker>
        </div>
      </div> -->
      <div class="box">
        <el-carousel trigger="click" ref="carousel" :height="hannerHeight + 'px'" @change="setActiveItem">
          <el-carousel-item v-for="fit in fits" :key="fit">
            <!-- <h3 class="small">{{ item }}</h3> type="card" -->
            <!-- <img :src="item.url" alt="" class="bannerimg" /> -->
            <el-image style="width: 120px; height: 150px" :src="url" :fit="fit" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="footer-panel" />
    </div>
    <div class="com-bottom panel3">
      <h2>2021年2月监测分析报告内容摘要</h2>
      <div class="dian-box">
        <div class="dian">
          <div class="title">
            <img src="../../assets/testReport/dian.png" alt="" />
            <div class="text">电能指标</div>
          </div>
          <div class="ul-box">
            <!-- 1 -->
            <div class="ul">
              <div class="icon">
                <i class="el-icon-star-on" />
              </div>
              <div>客户最大负荷3805kW,本期共4台变压器，总容量49900千伏安</div>
            </div>
            <!-- 2  -->
            <div class="ul">
              <div class="icon">
                <i class="el-icon-star-on" />
              </div>
              <div>客户当期电量：3289839.50千瓦时</div>
            </div>
          </div>
        </div>
        <div class="jia">
          <div class="title">
            <img src="../../assets/testReport/dian.png" alt="" />
            <div class="text">量价费分析</div>
          </div>
          <div class="ul-box">
            <!-- 1 -->
            <div class="ul">
              <div class="icon">
                <i class="el-icon-star-on" />
              </div>
              <div>功率因数考核标准值0.85</div>
            </div>
            <!-- 2  -->
            <div class="ul">
              <div class="icon">
                <i class="el-icon-star-on" />
              </div>
              <div>用电质量，您本期平均电压合格率100%，三项不平衡度综合评估10.57%</div>
            </div>
          </div>
        </div>
        <div class="fu-he">
          <div class="title">
            <img src="../../assets/testReport/dian.png" alt="" />
            <div class="text">负荷分析</div>
          </div>
          <div class="ul-box">
            <!-- 1 -->
            <div class="ul">
              <div class="icon">
                <i class="el-icon-star-on" />
              </div>
              <div>本期上游行业，最新改行业用电是——，总用电量2345千瓦时，相应上期用电233千瓦时，环比49%，同比45%</div>
            </div>
            <!-- 2  -->
            <div class="ul">
              <div class="icon">
                <i class="el-icon-star-on" />
              </div>
              <div>本期下游行业，最新改行业用电是——，总用电量2345千瓦时，相应上期用电233千瓦时，环比49%，同比45%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-panel"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestReport',

  data() {
    return {
      value3: '',
      picLength: 0,
      hannerHeight: 220,
      imgwrap: [
        { url: require('../../assets/testReport/01.png') }
        // { url: require('../../assets/testReport/01.png') },
        // { url: require('../../assets/testReport/01.png') }
      ],
      fits: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      url: require('../../assets/testReport/01.png')
    }
  },

  mounted() {},

  methods: {
    setActiveItem(i) {
      console.log(i)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './testReport.scss';
</style>
